<template>
  <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="formData.name" placeholder="请输入您的姓名" />
    </el-form-item>

    <el-form-item label="手机号" prop="phone">
      <el-input v-model="formData.phone" placeholder="请输入手机号" />
    </el-form-item>

    <el-form-item label="邮箱" prop="email">
      <el-input v-model="formData.email" placeholder="请输入邮箱地址" />
    </el-form-item>

    <el-form-item label="公司名称" prop="company">
      <el-input v-model="formData.company" placeholder="请输入公司名称" />
    </el-form-item>

    <el-form-item label="职位" prop="position">
      <el-input v-model="formData.position" placeholder="请输入您的职位" />
    </el-form-item>

    <el-form-item label="特殊需求" prop="specialRequirements">
      <el-input
        v-model="formData.specialRequirements"
        type="textarea"
        :rows="3"
        placeholder="如有特殊需求请在此说明（如：素食餐、轮椅通道、同声传译等）"
      />
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ref } from "vue";
const formRef = ref();
const formData = ref({
  name: "",
  phone: "",
  email: "",
  company: "",
  position: "",
  specialRequirements: "",
});

const rules = {
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    {
      min: 2,
      max: 50,
      message: "姓名长度在 2 到 50 个字符",
      trigger: "blur",
    },
  ],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
  email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }],
  company: [
    { max: 100, message: "公司名称不能超过100个字符", trigger: "blur" },
  ],
  position: [{ max: 50, message: "职位不能超过50个字符", trigger: "blur" }],
  specialRequirements: [
    { max: 500, message: "特殊需求不能超过500个字符", trigger: "blur" },
  ],
};

const validate = () => {
  return new Promise((resolve, reject) => {
    formRef.value
      .validate()
      .then(() => {
        resolve(formData.value);
      })
      .catch((err) => {
        console.log("err: ", err);
      });
  });
};

const resetFields = () => {
  formRef.value.resetFields();
};

defineExpose({
  validate,
  resetFields,
});
</script>
<style scoped></style>
